<html>
    <head>
        <title>Test</title>
        <style>

/*span {
  display:inline-block;
  min-width:max-content;
  border:1px solid;
  width:*;
  background:gold;
}

p {border:1px solid red;} */

ol > li > span.page::before {
  display:inline-block;
  width:*;
  height:1em;
  border-bottom:1dip dotted;
}

        </style>
        <script type="text/tiscript"></script>
    </head>
    <body>

<p #test>Some text <span>inline-block 1</span><span>inline-block 2</span></p>

<ol>
  <li>Down the Rabbit Hole <span.page>1</span></li>
  <li>The Pool of Tears <span.page>12</span></li>
  <li>The Caucus Race and a Long Tale <span.page>18</span></li>
  <li>The Rabbit Sends a Little Bill <span.page>22</span></li>
</ol>


    </body>
</html>